<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meteocal</title>
<link href="../css/calendar_page.css" rel="stylesheet" type="text/css" />
</h:head>

    <h:body style="background-color:#81a4c7" onload="#{scheduleView.updateView(ub.currentUser.email)}">
	<div id="wrap">
    	<div id="header">
            <a href="user_home3.xhtml"><img src="./../images/Logo.png" style="width:150px; height:150px;" /></a>
            <div style="float:right;">
                <div>
                    <p:commandButton value="Log out" style="width: 100px; border:0; box-shadow:0px 2px 5px #000000; 
                                             float: right; margin-left: 20px; margin-top: 10px; background: #6cb364; color: white; font-family: Comic Sans MS;" 
                                             action="#{loginBean.logout()}" />
                    <h:form style="float: left"><p:commandLink action="#{loginBean.logout()}"></p:commandLink></h:form>
                </div>
                <div style="float:right; ">
                    <h:form>
                        <p:inputText id="title" value="#{searchBean.parameter}" style="margin-top: 80px;" required="true"/>
                    <p:commandButton value="Search users" action="#{searchBean.resultUrl()}" style=" border:0; box-shadow:0px 2px 5px #000000; 
                              float: left; margin-left: 10px; margin-top: 76px; background: #6cb364; color: white; font-family: Comic Sans MS;" />
                    </h:form>
                </div>
            </div>
        </div>
        <div id="central">
            <div id="calendar_area">
                <div id="calendar_container">
                    <div id="calendar_header">
                        <h1>Your calendar</h1>
                        <p:button value="New event" outcome="create_event2" 
                          style="float: right; border:0; box-shadow:0px 2px 5px #000000; 
                                             margin-right: 52px; margin-bottom: 10px; background: #6cb364; font-weight: 400; color: white; font-family: Comic Sans MS;"/>
                    </div>
                    <h:panelGrid columnClasses="value" >
                        <p:schedule id="schedule" value="#{scheduleView.eventModel}" draggable="false" timeZone="GMT+1" resizable="false" 
                                    widgetVar="myschedule" style="margin-bottom: 20px;width: 700px; margin-left:45px; color: white; font-family: Comic Sans MS;">
                            <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                        </p:schedule>
                    </h:panelGrid> 
                    
                    <p:dialog widgetVar="eventDialog" showEffect="clip" hideEffect="clip" resizable="false" style="" >
                        <div id="event_container">
                            <div id="event_header">
                                <h1>Event details</h1>
                            </div>
                            <h:panelGrid id="eventDetails" columns="1" style="text-align: left; ">
                                <h:panelGrid columns="2">
                                    <h:panelGrid columns="1">
                                        <div>
                                            <span style="color: white; font-family: Comic Sans MS; font-size: 18px; float: left; margin-left: 10px; margin-top: 10px;">
                                                <b>Name:</b>
                                                #{scheduleView.selectedEvent.name}
                                                <br /><br />
                                                <b>Privacy:</b>
                                                #{scheduleView.selectedEvent.getPrivateString()}
                                                <br /><br />
                                                <b>Indoor:</b>
                                                #{scheduleView.selectedEvent.getIndoorString()}
                                                <br /><br />
                                                <b>Start time:</b>
                                                #{scheduleView.selectedEvent.starttime}
                                                <br /><br />
                                                <b>End time:</b>
                                                #{scheduleView.selectedEvent.endtime}
                                                <br /><br />
                                                <b>Place:</b>
                                                #{scheduleView.selectedEvent.place}
                                                <br /><br />
                                                <b>Description:</b>
                                                <div style="width: 450px; overflow-y: auto;">
                                                    <p >#{scheduleView.selectedEvent.description}</p>
                                                </div>
                                                <b>Weather:</b>
                                                <p:graphicImage id="weatherIcon" value="#{scheduleView.retrieveCorrectUrl(scheduleView.selectedEvent)}" style="float: left; margin-left: 20px;"/>
                                                    <span style="color: white; font-family: Comic Sans MS; font-size: 18px; float: left; margin-left: 10px;">
                                                    <b>#{scheduleView.selectedEvent.retrieveNameCondition()}</b>
                                                    <br />
                                                    <b>Min. Temperature:</b>
                                                    #{scheduleView.selectedEvent.retrieveMinTemp()}
                                                    <br />
                                                    <b>Max. Temperature:</b>
                                                    #{scheduleView.selectedEvent.retrieveMaxTemp()}
                                                    </span>
                                            </span>
                                        </div>
                                    </h:panelGrid>
                                    <h:panelGrid columns="1" style="margin-left: 35px; background: none">
                                        <div id="organizer_container">
                                            <div id="organizer_header">
                                                <h1>Organizer</h1>
                                            </div>
                                            <p:panelGrid columns="2">
                                                <f:facet name="header">
                                                    <a href="#{scheduleView.resultUserUrl()}">
                                                        <p:graphicImage id="avatarImg" value="#{scheduleView.userAvatar}" cache="false" style="width:250px; height:250px;">
                                                            <f:param name="id" value="#{scheduleView.selectedEvent.owner.email}" />
                                                    </p:graphicImage>
                                                    </a>
                                                </f:facet>

                                                <h:outputText value="Name:" />
                                                <h:outputText value="#{scheduleView.selectedEvent.owner.name}" />

                                                <h:outputText value="Surname:" />
                                                <h:outputText value="#{scheduleView.selectedEvent.owner.surname}" />

                                                <h:outputText value="Email:" />
                                                <h:outputText value="#{scheduleView.selectedEvent.owner.email}" />

                                                <h:outputText value="Phone:" />
                                                <h:outputText value="#{scheduleView.selectedEvent.owner.phone}" />
                                            </p:panelGrid>
                                        </div>
                                        <p:panel id="toggleable" header="Participants" toggleable="true" collapsed="true" closable="false" toggleSpeed="500" closeSpeed="500" widgetVar="panel">
                                            <h:panelGrid columns="1" >
                                                <p:panel style="height: 100px; overflow-y: auto;">
                                                    <ui:repeat value="#{scheduleView.selectedEvent.userCollection}" var="user">
                                                            <li style=" font-family: Comic Sans MS; color: black;">
                                                                <h:link value="#{user.name} #{user.surname} (#{user.email})" outcome="#{scheduleView.retrieveCorrectOutcome(user.email)}" style="list-style: none; color: black; font-family: Comic Sans MS; font-size: 18px;" >
                                                                    <f:param name="user" value="#{user.email}" />
                                                                </h:link>
                                                            </li>
                                                    </ui:repeat>
                                                </p:panel>
                                            </h:panelGrid>
                                        </p:panel>
                                    </h:panelGrid>
                                </h:panelGrid>
                                <h:panelGrid columns="2">
                                <h:form id="modifyForm" style="margin-top: 10px;">
                                    <p:commandButton value="Modify event" rendered="#{scheduleView.isTheOwner(ub.currentUser, scheduleView.selectedEvent)}" action="#{scheduleView.resultUrl()}" style=" border:0; box-shadow:0px 2px 5px #000000; 
                                      float: left; margin-bottom: 10px; margin-left: 10px; margin-top: 10px; background: #6cb364; color: white; font-family: Comic Sans MS;" />
                                </h:form>
                                <h:form id="cancelForm" style="margin-top: 10px;">
                                    <p:commandButton value="Cancel event" rendered="#{scheduleView.isTheOwner(ub.currentUser, scheduleView.selectedEvent)}" action="#{eventBean.deleteEvent(scheduleView.selectedEvent)}" style=" border:0; box-shadow:0px 2px 5px #000000; 
                                      float: left; margin-bottom: 10px; margin-left: 10px; margin-top: 10px; background: #6cb364; color: white; font-family: Comic Sans MS;" />
                                </h:form>
                                </h:panelGrid>
                            </h:panelGrid>
                        </div>
                    </p:dialog>
                </div>
            </div>
        </div>
        <div id="footer">
            <p>Software engineering 2</p>
            Project 2014-2015<br />
            Rimoldi_Lattari<br />
            <p></p>
        </div>
    </div>
</h:body>
</html>